<template>
  <Card>
    <Row style="min-height:258px;max-height:258px;">
      <Col>
        <div style="margin-bottom:15px;">
          <h2 style="font-size:24px;font-weight:100;margin-top:5px;">
            继电器操作
          </h2>
        </div>
        <div style="margin-bottom:15px;text-align:center;">
          <p v-if="commandStatus === 2">
            获取设备状态失败，请尝试
            <a href="javascript:void(0);" @click="init()">再次获取</a>
          </p>

          <p v-if="commandStatus === 1">
            <Badge status="success" text="继电器闭合" />&nbsp;
            <Button size="small" @click.stop="handleShutdown">断开</Button>
          </p>

          <p v-if="commandStatus === 0">
            <Badge status="success" text="继电器断开" />&nbsp;
            <Button size="small" @click.stop="handleOpen">闭合</Button>
          </p>
        </div>
        <div>
          <p style="font-weight:bold;margin-bottom:7px;">命令控制历史</p>
          <Table
            size="small"
            border
            :columns="failColumns"
            style="margin-bottom:7px;"
            :data="tableData"
          >
          </Table>
          <p style="font-size:12px;text-align:right;" v-if="showMoreBtn">
            <a href="javascript:void(0);" @click="handleGetMore">查看全部</a>
          </p>
        </div>
      </Col>
    </Row>
    <Spin size="large" fix v-if="spinShow">
      {{ spinText }}
    </Spin>
    <Modal v-model="visible" title="命令控制历史">
      <Table :columns="failColumns" :data="tableDataAll"></Table>
      <div slot="footer">
        <Page
          :current="pageInfo.page"
          :page-size="6"
          :total="pageInfo.total"
          simple
          @on-change="handleChangePage"
        />
      </div>
    </Modal>
  </Card>
</template>
<script>
import { genFailColumns } from "./_utils";
import {
  getCommandStatus as httpGetCommandStatus,
  getOperateHistory as httpGetOperateHistory,
  processStopOrStart as httpProcessStopOrStart
} from "@/api";

export default {
  props: {
    id: { type: String, default: "" },
    userRole: { type: String, default: "ROLE_DEMO" }
  },
  mounted() {
    this.init();
  },
  watch: {
    id() {
      this.init();
    }
  },
  data() {
    const vm = this;
    return {
      spinText: "正在与设备通信...",
      spinShow: false,
      commandStatus: 2,
      failColumns: genFailColumns(vm),
      visible: false,
      showMoreBtn: false,
      tableData: [],
      tableDataAll: [],
      pageInfo: {
        total: 0,
        page: 1
      }
    };
  },
  methods: {
    init() {
      const vm = this;
      if (!vm.id) return;
      this.spinShow = true;
      this.spinText = "正在与设备通信...";
      const params = { deviceId: vm.id };
      this.getOperateHistory();
      httpGetCommandStatus(params).then(res => {
        if (res.code === 200) {
          const { data } = res;
          this.commandStatus = data.status;
          this.spinText = "操作成功!";
        } else {
          this.spinText = res.message;
          this.commandStatus = 2;
        }
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      });
    },

    // 断闸
    handleShutdown() {
      const vm = this;
      const deviceId = vm.id;
      const status = 1;
      const params = {
        deviceId,
        status
      };

      vm.$Modal.confirm({
        title: "提示",
        content: "<p>确认提交吗？</p>",
        onOk: () => {
          vm.spinShow = true;
          vm.spinText = "正在与设备通信...";
          httpProcessStopOrStart(params).then(res => {
            if (res.code === 200) {
              const {
                data: { status }
              } = res;
              vm.commandStatus = status;
              vm.spinText = "操作成功!";
              this.getOperateHistory();
            } else {
              vm.spinText = res.message;
            }
            setTimeout(() => {
              vm.spinShow = false;
            }, 500);
          });
        }
      });
    },

    // 服务启动
    handleOpen() {
      const vm = this;
      const deviceId = vm.id;
      const status = 0;
      const params = {
        deviceId,
        status
      };
      vm.$Modal.confirm({
        title: "提示",
        content: "<p>确认提交吗？</p>",
        onOk: () => {
          vm.spinShow = true;
          vm.spinText = "正在与设备通信...";
          httpProcessStopOrStart(params).then(res => {
            if (res.code === 200) {
              const {
                data: { status }
              } = res;
              vm.commandStatus = status;
              vm.spinText = "操作成功!";
              this.getOperateHistory();
            } else {
              vm.spinText = res.message;
            }
            setTimeout(() => {
              vm.spinShow = false;
            }, 500);
          });
        }
      });
    },

    getOperateHistory() {
      const vm = this;
      const params = {
        id: vm.id,
        size: 2
      };
      httpGetOperateHistory(params).then(res => {
        if (res.data) {
          const { list } = res.data;
          if (list.length === 0) {
            vm.tableData = [];
            vm.showMoreBtn = false;
          } else {
            vm.showMoreBtn = true;
            vm.tableData = JSON.parse(JSON.stringify(list));
          }
        }
      });
    },

    handleChangePage(index) {
      this.pageInfo.page = index;
      this.getOperateHistoryAll(index);
    },

    // 获取全部操作历史记录
    getOperateHistoryAll(page) {
      const params = {
        id: this.id,
        size: 6,
        page
      };
      httpGetOperateHistory(params).then(res => {
        if (res.code === 200) {
          this.tableDataAll = res.data.list;
          this.pageInfo.total = res.data.total;
        } else {
          this.tableDataAll = [];
          this.pageInfo.total = 0;
        }
      });
    },

    // 获取更多
    handleGetMore() {
      this.visible = true;
      this.pageCurrent = 1;
      this.getOperateHistoryAll(1);
    }
  }
};
</script>
